import { message, Image, Button } from 'antd';
import { useEffect, useState } from 'react';

import commonService from '@/api/services/commonService';
import FavIcon from '@/assets/img/collect_off.png';
import FavOnIcon from '@/assets/img/collect_on.png';
import LeftImg from '@/assets/img/left.png';
import moreImg from '@/assets/img/more.png';
import RecommendImg from '@/assets/img/recommend.png';
import RightImg from '@/assets/img/right.png';
import { CommonButtons } from '@/components/CommonButtons';
import setEditorDate from '../editor/setEditorDate';
import goodsDetailModalStore from '@/editorComponent/LeftMenu/GoodsModule/GoodsDetailModal/goodsDetailModalStore';
import goodsUtils from '@/utils/goodsUtils';
import { DesignData } from '#/type';

export default function recommendBlock({ list, refetch }: any) {
  const [dataSource, setDataSource] = useState<any>(list);
  const [step, setStep] = useState<number>(0);

  const setFav = async (item: any) => {
    await commonService.collectApi('collect', { targetId: item.id, type: 1 });
    message.success('收藏成功！');
    refetch();
  };

  useEffect(() => {
    setDataSource(list.slice(step, step + 4));
  }, [step, list]);

  const handleLeft = () => {
    setStep(step - 4);
  };

  const handleRight = () => {
    setStep(step + 4);
  };

  return (
    <div className="relative left-[50%] ml-[-712px] mt-[38px] flex w-[1424px] flex-col">
      <div className="relative flex items-center justify-between">
        <img className="h-[80px] w-[280px]" src={RecommendImg} alt="recommend" />
        <div
          className="flex cursor-pointer items-center gap-[4px] text-[20px] text-[#686B73]"
          onClick={() => {
            window.location.href = '/#/goods';
          }}
        >
          查看全部
          <img className="h-[14px] w-[14px]" src={moreImg} alt="more" />
        </div>
      </div>
      <div className="relative mt-[10px] flex justify-between overflow-hidden">
        <div className="absolute left-[6px] top-[36%] z-[888]">
          <Button onClick={handleLeft} size="large" shape="circle" disabled={step === 0}>
            <img className="h-[40px] w-[40px]" src={LeftImg} alt="left" />
          </Button>
        </div>
        <div className="absolute right-[6px] top-[36%] z-[888]">
          <Button
            onClick={handleRight}
            size="large"
            shape="circle"
            disabled={step + 4 >= list.length}
          >
            <img className="h-[40px] w-[40px]" src={RightImg} alt="right" />
          </Button>
        </div>
        {dataSource.map((item: any, index: number) => {
          return (
            <div className="relative mb-[16px] flex cursor-pointer flex-col" key={index}>
              <div className="relative h-[330px] w-[330px]">
                <Image.PreviewGroup items={JSON.parse(item.thumbs || '[]')}>
                  <Image
                    className="mb-[10px] h-[330px] w-[330px] rounded-[4px]"
                    src={JSON.parse(item.thumbs || '[]')[0]}
                    alt="img"
                    preview={false}
                    onClick={(e) => {
                      console.log(item);
                      window.location.href = `/#/editor?ppId=${item.ppId}`;
                      const { color, colorValue, designData, ppId, previewThumb, thumbs, printArea, threadColor = "#ffffff" } = item as DesignData;
                      setEditorDate(item.ppId, { color, colorValue, designData: JSON.parse(designData as any), ppId, previewThumb, thumbs, printArea, threadColor });
                    }}
                  />
                </Image.PreviewGroup>
                <div
                  className="absolute right-[10px] top-[10px] z-10 h-[34px] w-[34px]"
                  onClick={(e) => {
                    e.stopPropagation();
                    setFav(item);
                  }}
                >
                  <img className="h-[34px] w-[34px]" src={true ? FavIcon : FavOnIcon} alt="fav" />
                </div>
              </div>

              <div className="mt-[10px]">{item.goodsName}</div>
              <div>￥{(item.price / 100).toFixed(2)}</div>
              <CommonButtons good={item} detail cart />
            </div>
          );
        })}
      </div>
    </div>
  );
}
